<template>
    <div class="shop">
        <div class="nav-title">
            <img src='@/img/pic2.png'>
            <h1>需求供应</h1>
        </div>
        <div class="supply">
        <el-row>        
            <el-col :lg="18" :sm="24" :xs="24">
                <h2 class="title">国际供应<span>IMPORT SUPPLY</span></h2>
                <div v-if="supply.data">
                <el-row class="shop-news" v-for="item in supply.data" :key="item.orderid">
                    <el-col :lg="8"><div><img :src="item.img1"></div></el-col>
                    <el-col :lg="16">
                        <h2><router-link :to="`/sdetails?id=${item.orderid}`">{{item.goodsname}}</router-link></h2>
                        <h3>{{item.orderNameen}}</h3>
                        <p>{{item.summary}}</p>
                        <div class="clearbox">
                            <div class="fl clearbox">
                                <p class="sate f1">订单状态:{{item.tradeflag==0?"未完成":"已完成"}}</p>
                                <p class="fl type">
                                    <svg t="1749646561589" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7876" width="200" height="200"><path d="M704.13 576.11c42.74 0 82.92 16.64 113.14 46.86s46.86 70.4 46.86 113.14-16.64 82.92-46.86 113.14-70.4 46.86-113.14 46.86-82.91-16.65-113.13-46.87-46.86-70.4-46.86-113.14 16.64-82.92 46.86-113.14c30.22-30.21 70.39-46.85 113.13-46.85m0-64c-123.71 0-224 100.29-224 224s100.29 224 224 224 224-100.29 224-224-100.29-224-224-224zM641.01 223.5h-362c-17.67 0-32 14.33-32 32s14.33 32 32 32h362c17.67 0 32-14.33 32-32s-14.33-32-32-32zM542.77 400.75H279.01c-17.67 0-32 14.33-32 32s14.33 32 32 32h263.76c17.67 0 32-14.33 32-32s-14.33-32-32-32zM369.76 578h-90.75c-17.67 0-32 14.33-32 32s14.33 32 32 32h90.75c17.67 0 32-14.33 32-32s-14.33-32-32-32z" p-id="7877" fill="#1296db"></path><path d="M411.42 960h-198.4c-61.76 0-112-50.24-112-112V176c0-61.76 50.24-112 112-112H707c61.76 0 112 50.24 112 112v242.21c0 17.67-14.33 32-32 32s-32-14.33-32-32V176c0-26.47-21.53-48-48-48H213.02c-26.47 0-48 21.53-48 48v672c0 26.47 21.53 48 48 48h198.4c17.67 0 32 14.33 32 32s-14.33 32-32 32z" p-id="7878" fill="#1296db"></path><path d="M794 804h-93c-28.67 0-52-23.33-52-52v-96c0-17.67 14.33-32 32-32s32 14.33 32 32v84h81c17.67 0 32 14.33 32 32s-14.33 32-32 32z" p-id="7879" fill="#1296db"></path></svg>
                                    {{business[item.businessid-1].businessName}}</p>
                            </div>
                            <div class="fr">{{item.publishtime}}</div>
                        </div>
                    </el-col>
                </el-row>
                </div>
                <div>
                    <el-pagination background layout="prev, pager, next" 
                    :total="supply.total_records"
                    :page-count="supply.total_pages"
                    :current-page="supply.page"
                    @prev-click="pageQuery"
                    @next-click="pageQuery"
                    @current-change="pageQuery" />
                </div>           
            </el-col>
            <el-col :lg="6" :sm="24" :xs="24">
                <supplyNav :busdata="business" :siddata="sidebar" @event="childfun"></supplyNav>
                </el-col>
            </el-row>
        </div>                           
    </div>          
</template>
<script>
import{toRefs,reactive,getCurrentInstance,onMounted} from 'vue'
import supplyNav from '@/components/supply_Nav.vue'

export default{
    components:{
        supplyNav:supplyNav
    },
    setup(){
        const data=reactive({
            business:[],
            sidebar:[],
            supply:{},
            page:1,
            bussinessid:""
        })
        const pageQuery=(page)=>{
            data.page=page
            selsupply()
        }
        const{proxy}=getCurrentInstance()
        const selsupply=(async()=>{
            await proxy.$axios.get("/api/supply",{
            params:{businessid:data.businessid,page:data.page,page_size:10}})
            .then(function(response){
                var arr=JSON.parse(response.data)
                console.log(arr)
                for (var obj of arr.data){
                    obj.img1=`/src/${obj.img1}`
                }
                data.supply=arr
            })
        })
        const childfun=(value)=>{
            data.businessid=value
            selsupply()
        }
        onMounted(async()=>{
            //行业分类
            await proxy.$axios.get("/api/business",{params:{}})
            .then(function(response){
                var arr=JSON.parse(response.data)
                console.log(arr)
                data.business=arr
            })
            .catch(function(error){
                console.log(error);
            });
            //侧栏
            await proxy.$axios.get("/api/sidebar2",{params:{}})
            .then(function(response){
                var arr=JSON.parse(response.data)
                console.log(arr)
                for (var obj of arr){
                    obj.img1=`/src/${obj.img1}`
                }
                data.sidebar=arr
            })
            selsupply()
        })
        return{
            ...toRefs(data),pageQuery,childfun
        }
    },
}
</script>

<style scoped>
.supply>.el-row>.el-col .shop-news .el-col .sate{background-color: rgb(1, 159, 12); color: white; }
</style>